<template>
  <div>
    <el-table
    :data="tableData3"
    stripe
    style="width: 100%">
    <el-table-column
    prop="sectionTestId"
    label="序号"
    width="200"
    >
  </el-table-column>
  <el-table-column
  prop="section.sectionName"
  label="章节名称"
  width="200"
  >
</el-table-column>
  <el-table-column
  prop="sectionTestState"
  label="测验状态"
  :formatter="checkState"
  width="200">
</el-table-column>
<el-table-column
prop="sectionTestScore"
label="分数"
width="200">
</el-table-column>
<el-table-column
label="操作"
width="200"
>
<template slot-scope="scope">
<el-button type="primary" v-if="scope.row.sectionTestState == 1"  v-bind:disabled="scope.row.sectionTestState == 1 " >测验</el-button>
<el-button type="primary" @click=gotoTest(scope.row) v-if="scope.row.sectionTestState == 0" >测验</el-button>
</template>
</el-table-column>
</el-table>
<div class="block">
  <el-pagination
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  :current-page.sync="pageIndex"
  :page-size="pageSize"
  layout="prev, pager, next, jumper"
  :total="total">
</el-pagination>
</div>
</div>
</template>

<script>
//导入api接口
import { listSectionTest } from '@/axios/api'
export default {
  data() {
    return {
      pageIndex:1,
      total:0,
      pageSize:10,
      tableData3: []
    };
  },
  methods: {
  handleSizeChange: function(val) {
    console.log(`每页 ${val} 条`);
  },
  handleCurrentChange :function(val) {
    console.log(`当前页: ${val}`);
    this.pageIndex = parseInt('${val}');
    this.listSectionTest() ;
  },
  gotoTest(row) {
    this.$router.push({name:'测验题目', path: "/SectionTestPaperList" ,params: {id:row.sectionTestId}})
  },
  checkState:function(row,column){
    var state = row[column.property];
    if(state == 0){
      return "可测验";
    }
    if(state == 1){
      return "已测验";
    }
  },
  sectionTestPaper:function(){
    this.$router.push({name:"试卷",path:'/listSectionTestPaper',params:{sectionId:row.sectionId}});
  },

  getSectionTestList:function() {
  let param = {pageIndex: this.pageIndex}
  listSectionTest(param).then(res => {
      this.total = res.resData.total;
      this.pageSize = res.resData.pageSize;
      this.tableData3 = res. resData.list;
    })
  }
},

  //页面首次进入执行的方法
  mounted() {
    this.getSectionTestList();
  }
}
</script>
